<template>
  <div class="app-container">
    <div class="custom_card_0" v-show="showSearch">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="消息信息" prop="content">
          <el-input v-model="queryParams.content" clearable  placeholder="请输入消息内容、接收人"></el-input>
        </el-form-item>
        <el-form-item label="消息类型" prop="pushNode">
          <el-select v-model="queryParams.pushNode" placeholder="请选择消息类型" clearable size="small">
            <el-option label="新订单通知" value="1" />
            <el-option label="业务员通知" value="2" />
            <el-option label="告警通知" value="5" />
            <el-option label="商业险到期通知" value="6" />
            <el-option label="交强险到期通知" value="7" />
            <el-option label="年检到期通知" value="8" />
            <el-option label="保养到期通知" value="9" />
            <el-option label="用户取车通知" value="10" />
            <el-option label="用户还车通知" value="12" />
            <el-option label="用户免押通知" value="14" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送方式" prop="templateId">
          <el-select v-model="queryParams.templateId" placeholder="请选择发送方式" clearable size="small">
            <el-option label="企微单人通知" value="1" />
            <el-option label="钉钉单人通知" value="2" />
            <el-option label="短信通知" value="3" />
            <el-option label="企微群通知" value="4" />
            <el-option label="钉钉群通知" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择发送状态" clearable size="small">
            <el-option label="发送成功" value="0" />
            <el-option label="发送失败" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送时间" prop="sendTime">
          <el-date-picker clearable  size="small" v-model="queryParams.sendTime" type="date" value-format="yyyy-MM-dd" placeholder="选择发送时间"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="custom_card">
      <el-table
        v-loading="loading"
        :data="smsList"
        border
      >
        <el-table-column label="消息内容" align="left" prop="content" min-width="160" show-overflow-tooltip/>
        <el-table-column label="消息类型" align="center" prop="pushNode" show-overflow-tooltip>
          <template slot-scope="scope">
            {{formatMsgType(scope.row.pushNode)}}
          </template>
        </el-table-column>
        <el-table-column label="发送方式" align="center" prop="templateId" show-overflow-tooltip>
          <template slot-scope="scope">
            {{formatSendMethod(scope.row.templateId)}}
          </template>
        </el-table-column>
        <el-table-column label="接收人" align="left" prop="customerName" min-width="160" show-overflow-tooltip/>
        <el-table-column label="发送状态" align="center" prop="status"  show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.status == 0 ? '发送成功': '发送失败'}}
          </template>
        </el-table-column>
        <el-table-column label="发送时间" align="center" prop="sendTime"  show-overflow-tooltip/>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
    </div>
  </div>
</template>

<script>
import {
  listSms,
} from '@/api/message/sms'
export default {
  name: 'Sms',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消息表格数据
      smsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        content: null,
        pushNode: null,
        templateId: null,
        status: null,
        sendTime: null,
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询消息列表 */
    getList() {
      this.loading = true
      listSms(this.queryParams).then((response) => {
        this.smsList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    formatMsgType(msgType){
        switch (msgType) {
          case 1:
            return "新订单通知";
          case 2:
          case 3:
          case 4:
            return "业务员通知";
          case 5:
            return "告警通知";
          case 6:
            return "商业险到期通知";
          case 7:
            return "交强险到期通知";
          case 8:
            return "年检到期通知";
          case 9:
            return "保养到期通知";
          case 10:
          case 11:
            return "用户取车通知";
          case 12:
          case 13:
            return "用户还车通知";
          case 14:
          case 15:
            return "用户免押通知";
        }
    },
    formatSendMethod(templateId){
        switch (templateId) {
          case 1:
            return "企微单人通知";
          case 2:
            return "钉钉单人通知";
          case 3:
            return "短信通知";
          case 4:
            return "企微群通知";
          case 5:
            return "钉钉群通知";
        }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
  },
}
</script>
